<template>
	<view class="page_content">
		<u-navbar title="订单详情" :autoBack="true" :bgColor="theme_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
		<scroll-view scroll-y="true" class="scroll-Y" :style="'margin-top:' + navH + 'px;'">
			<view class="content_box">
				<view class='header bg-color acea-row'>
					<view class='data'>
						<view class='state'>{{order_details_data.status_desc || ''}}</view>
						<view>{{order_details_data.add_time}}</view>
					</view>
					<view></view>
				</view>
				<view class="recipient_information">
					<view class='address'>
						<view class='flex'>
							<view>{{order_details_data.consignee}}</view>
							<view style="padding-left: 10px;">{{order_details_data.mobile}}</view>
						</view>
						<view>{{order_details_data.address}}</view>
						<view style="margin-top: 15rpx;">
							订单留言&ensp;:<text style="padding-left: 10upx;">{{order_details_data.postscript}}</text>
						</view>
					</view>
					<view class='line'>
						<image :src="ima_url+'/statics/yilangmp/line.jpg'"></image>
					</view>
				</view>

				<view class="acea-row"
					style="justify-content: space-evenly;justify-content: flex-end;margin: 10px;">
					<u-button text="申请售后" @click="customerService()" type="error"
						customStyle="width:100px;marginLeft:10px;"
						v-if="order_details_data.goods_info[0].aftersale == true"></u-button>

					<u-button text="删除订单" @click="deleteOrder()" type="error" customStyle="width:100px;marginLeft:10px;"
						v-if="order_details_data.order_status == 2"></u-button>

					<u-button text="取消订单" @click="cancelOrder()" type="error" customStyle="width:100px;marginLeft:10px;"
						v-if="order_details_data.status_btn.cancel && order_details_data.status_btn.cancel == 1 "></u-button>

					<u-button text="申请退款" @click="applyReturn()" type="error" customStyle="width:100px;marginLeft:10px;" :plain="true"
						v-if="order_details_data.is_refund == 1"></u-button>

					<u-button text="继续支付" @click="pay()" type="error" customStyle="width:100px;marginLeft:10px;"
						v-if="order_details_data.status_btn.pay == true"></u-button>
						
					<u-button text="确认收货" type="success" v-if="order_details_data.status_desc == '待收货'" color="linear-gradient(to right, #F25B6F, #FA8D97)"
						@click="delievered_confirm()"></u-button>	
				</view>

				<view class="wrapper" style="border-bottom: 5px solid #eeeeee;">
					<view style="text-align: center;align-items: center;font-size: 16px;margin: 0 auto;width: 100px;"
						class="flex" @click="toChat">
						<u-icon name="chat" color="green" size="30"></u-icon>
						联系商家
					</view>
				</view>

				<view class="goods_information bg-white">
					<view class="fw-bolder fs-16 padding10">
						商品信息
					</view>
					<view class="middle">
						<view v-if="order_details_data.goods_info != null"
							v-for="(value,j) in order_details_data.goods_info" :key="j"
							@click="toDetail(value.goods_id)">
							<view class="goods_box">
								<view class="left">
									<image :src="value.goods_thumb" mode=""></image>
								</view>
								<view class="middle">
									<view class="title">
										{{value.goods_name}}
									</view>
									<view class="model">
										{{value.goods_attr || ''}}
									</view>
									<view class="unit">
									</view>
								</view>
								<view class="right">
									<view class="new_price">
										￥ {{value.goods_price}}
									</view>
									<view class="old_price">
									</view>
									<view class="number">
										<text>X {{parseInt(value.goods_number)}}</text>
									</view>
									<view class="status">
									</view>
								</view>
							</view>
							<view class="flex" style="justify-content: flex-end;">
								<u-button text="申请维修" @click="addService()" type="error" v-if="value.is_repair == 1"
									customStyle="width:80px;marginRight:10px;"></u-button>
							</view>
						</view>
					</view>
					<view class="bottom_0">
						<view class="view">
							<view class="left">
								合计
							</view>
							<view class="right" style="font-weight:bolder;font-size: 15px;">
								￥{{order_details_data.goods_amount}}
							</view>
						</view>
						<view class="view">
							<view class="left">
								运费
							</view>
							<view class="right">
								+￥{{order_details_data.shipping_fee}}
							</view>
						</view>
						<view class="view" style="font-size: 30upx;">
							<view class="left">
								实付款
							</view>
							<view class="right" style="color: #e93323;">
								￥{{order_details_data.order_amount}}
							</view>
						</view>

						<view class="view">
							<view class="left">
								支付方式
							</view>
							<view class="right">
								{{order_details_data.pay_name}}
							</view>
						</view>
					</view>
				</view>
				<view class='wrapper'>
					<view class='item acea-row row-between'>
						<view>订单编号：</view>
						<view class='conter acea-row row-middle row-right'>
							<view>{{order_details_data.order_sn}}</view>
							<!-- #ifndef H5 -->
							<view class='copy' @tap='copy'>复制</view>
							<!-- #endif -->
						</view>
					</view>
					<view class='item acea-row row-between'>
						<view>下单时间：</view>
						<view class='conter'>{{(order_details_data.add_time || '')}} </view>
					</view>
					<!-- 	<view class='item acea-row row-between'>
						<view>下单平台：</view>
						<view class='conter'>{{order_details_data.froms}}</view>
					</view> -->
					<view class='item acea-row row-between'>
						<view>快递单号：</view>
						<view class='conter'>{{order_details_data.invoice_no}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>配送方式：</view>
						<view class='conter'>{{order_details_data.shipping_name}}</view>
					</view>
				</view>

				<view class='wrapper'>
					<view class='item acea-row row-between'>
						<view>发票开头类型</view>
						<view class='conter'>
							<text v-if="order_details_data.inv_payee_type == 'individual' "
								style="padding-left: 10upx;">个人</text>
							<text v-else-if="order_details_data.inv_payee_type == 'unit' "
								style="padding-left: 10upx;">企业</text>
							<text v-else></text>
						</view>
					</view>
					<view class='item acea-row row-between'>
						<view>发票公司名</view>
						<view class='conter'>{{order_details_data.vat_inv_company_name || ''}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>发票抬头</view>
						<view class='conter'>{{order_details_data.vat_inv_company_name || ''}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>纳税人识别号</view>
						<view class='conter'>{{order_details_data.vat_inv_taxpayer_id || ''}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>注册地址</view>
						<view class='conter'>{{order_details_data.vat_inv_registration_address || ''}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>注册电话</view>
						<view class='conter'>{{order_details_data.vat_inv_registration_phone || ''}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>开户行</view>
						<view class='conter'>{{order_details_data.vat_inv_deposit_bank || ''}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>银行账号</view>
						<view class='conter'>{{order_details_data.vat_inv_bank_account || ''}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>发票收件人</view>
						<view class='conter'>{{order_details_data.inv_consignee_name || ''}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>发票收件人电话</view>
						<view class='conter'>{{order_details_data.inv_consignee_phone || ''}}</view>
					</view>
					<view class='item acea-row row-between'>
						<view>发票邮寄地址</view>
						<view class='conter'>{{order_details_data.inv_consignee_address || ''}}</view>
					</view>
				</view>
			</view>

		</scroll-view>

	</view>
</template>


<script>
	import {
		BASE_URL
	} from '@/config/app.js'
	import {
		order_info,
		confirm_received,
		cancel_order,
		del_order,
		after_apply,
		refund_order
	} from '@/api/user.js'
	import {
		epay_submit,
		supplier_kefu,
		third_epay_submit
	} from '@/api/store.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				navH: '',
				theme_color: getApp().globalData.theme_color,
				ima_url: BASE_URL,
				order_id: '',
				order_details_data: {
					status_desc:'',
					consignee:'',
					froms:''
				},
			}
		},
		computed: mapGetters(['isLogin', 'app_token']),
		onLoad(e) {
			this.navH = getApp().globalData.navHeight / 2 - 5;
			this.order_id = e.order_id;
			this.getOrderInfo()
		},
		methods: {
			toChat() {

				supplier_kefu({
					app_token: this.app_token,
					supplier_id: this.order_details_data.supplier_id,
					type: 1
				}).then(res => {
					if (res.data.length) {

						var kefu = res.data[0]

						this.$util.Tips('/pages/chat/chat_supplier/index?supplier_name=' + kefu.username +
							'&supplier_id=' + kefu.id + '&avatar=' + kefu.avatar + '&orderId=' +
							this.order_id)

						// this.$util.Tips('/pages/chat/chat_supplier/index?supplier_id=yl_su' + this
						// 	.order_details_data.supplier_id + '&supplier_name=' + this
						// 	.order_details_data.supplier_info.supplier_name + '&avatar=' + this
						// 	.order_details_data.supplier_info.logo)
					} else {
						this.$util.Tips({
							title: '暂无客服在线，请稍后联系'
						})
					}
				})


			},
			getOrderInfo() {
				var that = this;
				order_info({
					app_token: this.app_token,
					order_id: this.order_id
				}).then(res => {
					console.log(res)
					that.order_details_data = res.data;
				})
			},
			toDetail(goods_id) {
				uni.navigateTo({
					url: '/pages/goods/detail/index?goods_id=' + goods_id
				})
			},
			// 确定收货
			delievered_confirm: function() {
				var _this = this
				uni.showModal({
					title: '确定收货',
					success: function(res) {
						if (res.confirm) {
							confirm_received({
								app_token: _this.app_token,
								order_id: _this.order_id
							}).then((res) => {
								uni.showToast({
									title: res.msg,
									duration: 1200
								});
								_this.getOrderInfo()
							})
						} else if (res.cancel) {

						}
					},
					fail: function(res) {

					},
					complete: function(res) {

					}
				})
			},

			// 确定取消订单
			cancelOrder: function() {
				var _this = this;
				// 取消订单
				cancel_order({
					app_token: _this.app_token,
					order_id: _this.order_id, //订单id
					note: _this.cancelOrde_note
				}).then((res) => {
					uni.showToast({
						title: res.msg,
						duration: 2000
					})

					uni.$u.sleep(2000).then(() => {
						uni.navigateBack()
						uni.$emit('refresh_page')
					})
				})
			},

			applyReturn: function() {
				var _this = this;
				uni.showModal({
					title: '确定申请退款?',
					editable: true,
					placeholderText: '请填写申请原因',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中...'
							});
							refund_order({
								app_token: _this.app_token,
								order_id: _this.order_id,
								apply_note: res.content
							}).then((res2) => {
								uni.hideLoading()
								uni.showToast({
									title: res2.msg,
									duration: 2000
								})
								uni.$u.sleep(2000).then(() => {
									uni.navigateBack()
								})
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},

			// 删除订单
			deleteOrder: function(order_id) {
				var that = this;
				uni.showModal({
					content: '确定删除该订单？',
					success(res) {
						if (res.confirm) {
							del_order({
								app_token: that.app_token,
								order_id: that.order_id
							}).then((res) => {
								uni.showToast({
									title: res.msg,
									duration: 2000
								});
								uni.$u.sleep(2000).then(() => {
									uni.$emit('refresh_page')
									uni.navigateBack()
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},

			// 申请维修
			addService: function() {
				var list_json = JSON.stringify(this.order_details_data);
				uni.navigateTo({
					url: '/pages/repair/add?list_json=' + list_json
				})
			},

			customerService() {
				uni.navigateTo({
					url: '/pages/customer_service/post_apply/index?rec_id=' + this.order_details_data
						.goods_info[0].rec_id +
						'&goods_amount=' + this.order_details_data.goods_info[0].goods_price +
						'&goods_number=' + this.order_details_data.goods_info[0].goods_number
				})
			},

			pay() {
				var that = this;
				uni.showLoading({
					title: '请求中...'
				})
				wx.login({
					success(res) {
						var code = res.code;
						// 平台微信支付
						third_epay_submit({
							out_trade_no: that.order_details_data.order_sn, //订单号
							title: '',
							type: 'wechat',
							method: 'miniapp',
							app_token: that.app_token,
							code: code,
						}).then((res3) => {
							uni.hideLoading()
							var data = JSON.parse(res3.data);
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: data.timeStamp,
								nonceStr: data.nonceStr,
								package: data.package,
								signType: data.signType,
								paySign: data.paySign,
								success: function(res4) {
									uni.showToast({
										title: res4.msg,
										duration: 2000
									})
									setTimeout(() => {
										that.getOrderInfo()
									}, 2000)
								},
								fail: function(err) {
									console.log(err)
									that.getOrderInfo()
								}
							});
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_content {
		.on {
			color: #e93323;
			border: 2upx solid #e93323;
		}

		.content_box {
			border-top: 1px solid #fff;
		}

		.header_box {
			background-color: #EEEEEE;

			.header_bar {
				height: 90upx;
				text-align: center;
				// background: url("/static/houtai-assets/houtai_head_bg.png") -290upx -81upx no-repeat ;
				background-color: #e93323;
				text-align: center;
				position: fixed;
				// top: 0;

				/* #ifndef APP-PLUS */
				top: 0upx;
				/* #endif */

				/* #ifdef APP-PLUS */
				top: 50upx;
				/* #endif */

				left: 0;
				z-index: 1000;

				.img {
					width: 37upx;
					height: 37upx;
					float: left;
					position: absolute;
					top: 28upx;
					left: 29upx;
				}

				.txt {
					margin: 0 auto;

					.header_bar_text {
						height: 90upx;
						text-align: center;
						line-height: 90upx;
						font-size: 35upx;
						color: #FFFEFF;
					}

				}

			}
		}

		.content_box {
			margin-bottom: 250upx;

			.header {
				padding: 0 30rpx;
				height: 150rpx;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				justify-content: space-between;

				.pictrue {
					width: 110rpx;
					height: 110rpx;
				}

				.data {
					color: rgba(255, 255, 255, 0.8);
					font-size: 24rpx;
					margin-left: 27rpx;
				}

				.data.on {
					margin-left: 0;
				}

				.data .state {
					font-size: 30rpx;
					font-weight: bold;
					color: #fff;
					margin-bottom: 7rpx;
				}

				.data .time {
					margin-left: 20rpx;
				}
			}

			.on {
				background-color: #666 !important;
			}

			.nav {
				background-color: #fff;
				font-size: 26rpx;
				color: #282828;
				padding: 25rpx 0;
			}

			.recipient_information {
				.address {
					font-size: 26rpx;
					color: #868686;
					background-color: #fff;
					padding: 35rpx 30rpx;
				}

				.line {
					width: 100%;
					height: 3rpx;
				}

				.line image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.goods_information {
				width: 100%;

				.top {
					width: 100%;
					padding: 10upx 30upx;
				}

				.middle {
					.goods_box {
						padding: 20upx;
						display: flex;
						flex-direction: row;
						margin-bottom: 8upx;
						.left {
							vertical-align: top;
							padding-left: 10upx;
							flex: 2;
							padding-top: 10upx;
							image {
								width: 150upx;
								height: 150upx;
							}
						}

						.middle {
							vertical-align: top;
							flex: 5;
							padding: 0 20upx;

							.title {
								vertical-align: top;
								font-size: 25upx;
								padding-bottom: 16upx;
								font-weight: 600;
								// 超过两行隐藏
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.model {
								color: #9C9C9C;
								padding-bottom: 6upx;

							}

							.unit {
								color: #9C9C9C;
							}
						}

						.right {
							vertical-align: top;
							flex: 2;
							padding-right: 20upx;
							text-align: right;
							position: relative;

							.new_price {
								font-weight: 500;
								font-size: 24upx;
								padding-bottom: 10upx;
							}

							.old_price {
								font-weight: 500;
								color: #9C9C9C;
								padding-bottom: 10upx;
								text-decoration: line-through;
							}

							.number {
								font-weight: 500;
								color: #9C9C9C;

								image {
									width: 45upx;
									height: 45upx;
									display: inline-block;
									vertical-align: top;
								}

								text {
									vertical-align: top;
								}
							}

							.status {
								font-weight: 500;
								color: #EE606E;
								position: absolute;
								right: 20upx;
								bottom: 5upx;
							}
						}
					}
				}

				.bottom_0 {
					padding: 10upx 30upx;

					.view {
						padding: 8upx 0;
						display: flex;
						flex-direction: row;

						.left {
							flex: 1;
						}

						.right {
							flex: 1;
							text-align: right;
						}
					}

				}
			}

			.wrapper {
				background-color: #fff;
				padding: 30rpx;
				margin-top: 6px;
			}

			.wrapper .item {
				font-size: 28rpx;
				color: #282828;
			}

			.wrapper .item~.item {
				margin-top: 20rpx;
			}

			.wrapper .item .conter {
				color: #868686;
				text-align: right;
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-end;
			}

			.wrapper .item .conter .copy {
				color: #333;
				border-radius: 3rpx;
				border: 1rpx solid #666;
				padding: 3rpx 15rpx;
				margin-left: 24rpx;
			}

			.order_information {
				width: 100%;
				background-color: #FFFFFF;
				margin-top: 6px;

				.top {
					width: 100%;
					padding: 10upx 30upx 20upx;
					display: flex;
					flex-direction: row;

					.left {
						flex: 1;
						padding-top: 32upx;
						color: #e93323;
						font-size: 30upx;

						.txt {
							font-size: 6upx;
							color: #FFFDFE;
							background-color: #EB6100;
							border-radius: 8upx;
							padding: 3upx 6upx;
							margin-left: 20upx;
							font-weight: 400;
						}
					}

					.right {
						flex: 1;

					}

				}

				.middle {
					width: 100%;
					padding: 20upx 30upx 30upx;

					.view {
						padding: 5upx 0;

						.txt {
							display: inline-block;
							width: 110upx;
						}

						.txt_2 {
							display: inline-block;
							width: 180upx;
							text-align: right;
						}

						.img {
							padding-left: 10upx;
							display: inline-block;

							image {
								width: 25upx;
								height: 25upx;
							}
						}

					}
				}
			}


		}

		.bottom {
			width: 100%;
			height: 100upx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.left {
				flex: 2;
				height: 80upx;
			}

			.right {
				flex: 3;
				height: 100upx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				text-align: center;

				.left_into {
					flex: 1;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					background-color: #CC0518;
					margin: 25upx 30upx;
					border-radius: 8upx;
				}

				.right_into {
					flex: 1;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					background-color: #CC0518;
					margin: 25upx 30upx;
					border-radius: 8upx;
				}
			}

			.order_information {
				width: 100%;
				background-color: #FFFFFF;
				margin-top: 20upx;

				.top {
					width: 100%;
					padding: 10upx 30upx 20upx;
					font-size: 20upx;
					color: #323232;
					display: flex;
					flex-direction: row;
					border: 1upx solid #DEDEDE;

					.left {
						flex: 1;
						padding-top: 32upx;
						color: #e93323;
						font-size: 30upx;
						font-weight: 600;

						.txt {
							font-size: 6upx;
							color: #FFFDFE;
							background-color: #EB6100;
							border-radius: 8upx;
							padding: 3upx 6upx;
							margin-left: 20upx;
							font-weight: 400;
						}
					}

					.right {
						flex: 1;
					}
				}

				.middle {
					width: 100%;
					padding: 20upx 30upx 30upx;
					font-size: 20upx;
				}
			}
		}

		.mode {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba($color: #272822, $alpha: 0.6);
			z-index: 1100;
			align-items: center;
			font-size: 30upx;
			text-align: center;
			padding-top: 390upx;

			.content {
				width: 90%;
				background-color: #FFFFFF;
				border: 4upx solid #DEDEDE;
				border-radius: 10upx;
				padding: 20upx;
				margin: 0 auto;

				.top {
					text-align: left;
					padding: 20upx 60upx 30upx 0upx;

					.txt {
						vertical-align: top;
					}

					.img {
						display: inline-block;
						width: 55upx;
						height: 55upx;
						vertical-align: top;

						image {
							width: 55upx;
							height: 55upx;
						}
					}
				}

				.input {
					width: 100%;
					height: 180upx;
					padding: 20upx 45upx 20upx 0upx;
					border: 2upx solid #DEDEDE;
					text-align: left;
					margin-bottom: 20upx;
					font-size: 28upx;
				}

				.bottom_mode {
					width: 100%;
					display: flex;
					flex-direction: row;

					.cancel {
						width: 50%;
						text-align: center;
						padding: 20upx;
					}

					.confirm {
						width: 50%;
						text-align: center;
						padding: 20upx;
					}
				}
			}
		}

		.mode_2 {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #FFFFFF;
			z-index: 1100;
			font-size: 24upx;

			.header_box {
				width: 100%;
				background-color: #EEEEEE;
				font-size: 30upx;

				.header_bar {
					width: 100%;
					height: 90upx;
					text-align: center;
					// background: url("/static/houtai-assets/houtai_head_bg.png") -290upx -81upx no-repeat ;
					background-color: #e93323;
					position: fixed;
					top: 0;
					left: 0;
					z-index: 1000;

					.img {
						width: 37upx;
						height: 37upx;
						float: left;
						position: absolute;
						top: 28upx;
						left: 29upx;
					}

					.txt {
						width: 100%;
						margin: 0 auto;

						.header_bar_text {
							width: 100%;
							height: 90upx;
							text-align: center;
							line-height: 90upx;
							font-size: 35upx;
							color: #FFFEFF;
						}

					}

				}
			}

			.content {
				width: 100%;
				height: 100%;
				padding-top: 90upx;
				background-color: #FFFFFF;
				font-size: 28upx;
				color: #323232;
				padding-bottom: 50upx;

				.input_box {
					width: 100%;
					padding: 20upx 30upx 30upx;
					font-size: 28upx;

					.view {
						padding: 12upx 0;
						display: flex;
						flex-direction: row;

						.txt_2 {
							flex: 3;
							text-align: right;
							height: 70upx;
							line-height: 70upx;
						}

						.input {
							flex: 6;
							height: 70upx;
							padding: 10upx 20upx;
							font-size: 28upx;
							line-height: 70upx;
							border: 2upx solid #AAAAAA;
							margin-left: 5upx;
						}
					}
				}

				.order_box {
					width: 100%;
					font-size: 28upx;

					.delivery_method {

						.top {
							width: 100%;
							padding: 10upx 20upx;
							border: 2upx solid #EDEDED;

							.view_1 {
								width: 100%;
								font-size: 20upx;
								padding-bottom: 10upx;
								color: #323232;
								display: flex;
								flex-direction: row;

								.left {
									flex: 1;
									padding-top: 32upx;
									color: #e93323;
									font-size: 30upx;
									font-weight: 600;

									.txt {
										font-size: 6upx;
										color: #FFFDFE;
										background-color: #EB6100;
										border-radius: 8upx;
										padding: 3upx 6upx;
										margin-left: 20upx;
										font-weight: 400;
									}
								}

								.right {
									flex: 1;
									position: relative;

									image {
										width: 65upx;
										height: 65upx;
										position: absolute;
										right: 0upx;
										top: 30upx;
									}
								}
							}
						}

						.middle {
							width: 100%;
							padding: 10upx 20upx;

							.item_1 {
								width: 100%;
								height: 80upx;
								padding: 0 20upx;
								display: flex;
								text-align: center;

								.list_1 {
									flex: 1;
									height: 80upx;
								}

								.list_2 {
									flex: 3;
									height: 80upx;
									line-height: 80upx;
								}

								.list_3 {
									flex: 3;
									height: 80upx;
									line-height: 80upx;
								}

								.list_4 {
									flex: 7;
									height: 80upx;
									line-height: 80upx;
								}
							}

							.item_2 {
								width: 100%;
								height: 90upx;
								padding: 0 20upx;
								text-align: center;
								display: flex;

								.list_1 {
									flex: 1;
									height: 90upx;
									text-align: center;

									.list_1_1 {
										margin: 25upx auto;
										width: 40upx;
										height: 40upx;
										border-radius: 50%;
										border: 2upx solid #CDCDCD;
										background-color: #e93323;

									}

									.list_1_2 {
										margin: 25upx auto;
										width: 40upx;
										height: 40upx;
										border-radius: 50%;
										border: 2upx solid #CDCDCD;
									}
								}

								.list_2 {
									flex: 3;
									height: 90upx;
									line-height: 90upx;
								}

								.list_3 {
									flex: 3;
									height: 90upx;
									line-height: 90upx;
									padding: 20upx 20upx;
									font-size: 20upx;

									.list {
										width: 100%;
										height: 50upx;

										border: 2upx solid #CDCDCD;
										text-align: center;
										vertical-align: top;
										display: flex;
										flex-direction: row;
										font-size: 25upx;

										.left {
											flex: 1;
											height: 50upx;
											font-size: 3upx;
											line-height: 50upx;
											padding-top: 5upx;
											vertical-align: top;
											text-align: center;
										}

										.right {
											flex: 6;
											vertical-align: top;
											text-align: left;

											input {
												vertical-align: top;
												font-size: 25upx;
												padding-left: 5upx;
												height: 50upx;
												line-height: 50upx;
											}
										}
									}
								}

								.list_4 {
									flex: 7;
									height: 90upx;
									line-height: 90upx;
									padding: 20upx 5upx;
									font-size: 20upx;

									.list {
										width: 100%;
										height: 100%;
										padding-top: 6upx;
										padding-left: 10upx;
										border: 2upx solid #CDCDCD;
									}
								}
							}
						}
					}

					.goods_information {
						.top {
							width: 100%;
							padding: 10upx 20upx;
							border: 2upx solid #EDEDED;

							.view_1 {
								width: 100%;
								font-size: 20upx;
								padding-bottom: 10upx;
								color: #323232;
								display: flex;
								flex-direction: row;

								.left {
									flex: 1;
									padding-top: 32upx;
									color: #e93323;
									font-size: 30upx;

									.txt {
										font-size: 6upx;
										color: #FFFDFE;
										background-color: #EB6100;
										border-radius: 8upx;
										padding: 3upx 6upx;
										margin-left: 20upx;
										font-weight: 400;
									}
								}

								.right {
									flex: 1;
									position: relative;

									image {
										width: 65upx;
										height: 65upx;
										position: absolute;
										right: 0upx;
										top: 30upx;
									}
								}
							}
						}

						.middle {
							width: 100%;
							vertical-align: top;
							background-color: #FFFFFF;

							.top_title {
								width: 100%;
								padding: 20upx;
								display: flex;
								flex-direction: row;
								margin-bottom: 8upx;
								height: 50upx;

								.left_2 {
									flex: 3;
									text-align: center;
								}

								.middle_2 {
									flex: 3;
									text-align: center;
								}

								.right_2 {
									flex: 7;
									display: flex;
									flex-direction: row;

									.uni_price {
										flex: 2;
										text-align: center;
									}

									.number {
										flex: 1;
										text-align: center;
									}

									.total {
										flex: 2;
										text-align: center;
									}
								}
							}

							.goods_box {
								width: 100%;
								padding: 20upx;
								display: flex;
								flex-direction: row;
								margin-bottom: 8upx;
								background-color: #FFFFFF;

								.left {
									vertical-align: top;
									padding-left: 10upx;
									flex: 3;
									padding-top: 10upx;

									image {
										width: 150upx;
										height: 150upx;
									}
								}

								.middle {
									vertical-align: top;
									flex: 3;
									padding: 0 10upx;
									background-color: #FFFFFF;

									.title {
										vertical-align: top;
										font-size: 25upx;
										line-height: 26upx;
										padding-bottom: 16upx;
										font-weight: 600;
										// 超过两行隐藏
										text-overflow: -o-ellipsis-lastline;
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box;
										-webkit-line-clamp: 3;
										-webkit-box-orient: vertical;
										overflow: hidden;
									}

									.model {
										padding-top: 10upx;
										color: #9C9C9C;
										padding-bottom: 6upx;
										font-size: 25upx;
									}
								}

								.right {
									vertical-align: top;
									flex: 7;
									font-size: 20upx;

									.top_right {
										width: 100%;
										display: flex;
										flex-direction: row;

										.uni_price {
											flex: 2;
											text-align: center;
											padding: 5upx 5upx;
											margin: 0 4upx;
											border: 3upx solid #E9E9E9;
											display: flex;
											flex-direction: row;
											font-size: 25upx;

											.left {
												flex: 1;
											}

											.right {
												flex: 6;

												input {
													font-size: 25upx;
													padding-left: 3upx;
													height: 50upx;
													line-height: 50upx;
												}
											}
										}

										.number {
											flex: 1;
											text-align: center;
											padding: 5upx 5upx;
											margin: 0 4upx;
											border: 3upx solid #E9E9E9;
										}

										.total {
											flex: 2;
											text-align: center;
											padding: 5upx 5upx;
											margin: 0 4upx;
											border: 3upx solid #E9E9E9;
											display: flex;
											flex-direction: row;
											font-size: 25upx;

											.left {
												flex: 1;
											}

											.right {
												flex: 6;

												input {
													font-size: 25upx;
													padding-left: 3upx;
													height: 50upx;
													line-height: 50upx;
												}
											}
										}
									}

									.out_library {
										width: 100%;
										display: flex;
										flex-direction: row;
										margin-top: 20upx;
										font-size: 25upx;

										.left {
											flex: 2;
										}

										.right {
											flex: 6;

											input {
												font-size: 25upx;
												padding-left: 10upx;
												height: 50upx;
												line-height: 50upx;
												border: 3upx solid #E9E9E9;
											}
										}
									}
								}
							}

							.bottom_title {
								width: 100%;
								height: 50upx;
								font-size: 28upx;
								padding: 10upx 20upx 20upx 20upx;
								margin-bottom: 8upx;
								height: 50upx;
								position: relative;

								.box {
									height: 50upx;
									position: absolute;
									top: 0;
									right: 20upx;
									bottom: 0;

									text {
										height: 50upx;
										line-height: 50upx;
									}
								}
							}

							.order_remarks {
								width: 100%;
								height: 150upx;
								padding: 20upx;
								display: flex;
								flex-direction: row;
								text-align: center;

								.left {
									flex: 1;
									height: 150upx;
									line-height: 150upx;
									margin: 0 auto;
								}

								.right {
									flex: 3;
									height: 150upx;
									border: 2upx solid #C9C9C9;
								}
							}
						}
					}
				}

				.bottom_mode {
					width: 100%;
					margin-top: 90upx;
					display: flex;
					flex-direction: row;
					padding: 0 30upx;

					.cancel {
						flex: 1;
						height: 70upx;
						line-height: 70upx;
						margin-right: 40upx;
						text-align: center;
						color: #FFFFFF;
						background-color: #e93323;
					}

					.confirm {
						flex: 1;
						height: 70upx;
						line-height: 70upx;
						margin-left: 40upx;
						text-align: center;
						color: #FFFFFF;
						background-color: #e93323;
					}
				}
			}
		}
	}
</style>